<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <ui:composition template="./main-template.xhtml">
            <ui:param name="titulo" value="Administración del Catalogo" />
            <ui:define name="body">
                <rich:panel>
                    <a4j:form>
                        <a4j:commandButton value="Menu" action="menu" />
                        <rich:toolBar height="26" itemSeparator="disc">
                            <rich:toolBarGroup>
                                <h:graphicImage value="/img/new.gif" onclick="newMueble()" styleClass="icon" />
                            </rich:toolBarGroup>
                            <rich:toolBarGroup>
                                <h:graphicImage value="/img/save.gif" onclick="createMueble()" styleClass="icon" />
                            </rich:toolBarGroup>
                            <rich:toolBarGroup>
                                <h:graphicImage value="/img/find.gif" styleClass="icon" />
                            </rich:toolBarGroup>
                        </rich:toolBar>
                    </a4j:form>
                    <rich:simpleTogglePanel id="stpEdicion" opened="true">
                        <f:facet name="header">
                            Edición
                        </f:facet>
                        <a4j:form>
                            <rich:tabPanel switchType="client">
                                <rich:tab label="Datos Básicos">
                                    <font color="RED"><h:outputLabel value="#{CatalogBean.mensaje}" styleClass="label" /></font>
                                    <table>
                                        <tr>
                                            <td>
                                                <h:inputHidden value="#{CatalogBean.mueble.referencia}" />
                                                <h:outputLabel value="Nombre" styleClass="label" /> <br/>
                                            </td>
                                            <td>
                                                <h:inputText value="#{CatalogBean.mueble.nombre}" required="true"/>*<br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Alto" styleClass="label" /><br/>
                                            </td>
                                            <td>
                                                <h:inputText value="#{CatalogBean.mueble.alto}" />*<br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Ancho" styleClass="label" /> <br/>
                                            </td>
                                            <td>
                                                <h:inputText value="#{CatalogBean.mueble.ancho}" />*<br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Profundidad" styleClass="label" /> <br/>
                                            </td>
                                            <td>
                                                <h:inputText value="#{CatalogBean.mueble.profundidad}" />*<br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Material" styleClass="label" /> <br/>
                                            </td>
                                            <td>
                                                <h:inputText value="#{CatalogBean.mueble.material}" /> <br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Color" styleClass="label" /> <br/>
                                            </td>
                                            <td>
                                                <h:inputText value="#{CatalogBean.mueble.color}" /> <br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Tipo" styleClass="label" /> <br/>
                                            </td>
                                            <td>
                                                <h:selectOneMenu  value="#{CatalogBean.mueble.tipo}">
                                                    <f:selectItems value="#{CatalogBean.tiposMuebles}" />
                                                </h:selectOneMenu>*
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel value="Peso" styleClass="label" /> <br/>
                                            </td>
                                            <td>
                                                <h:inputText value="#{CatalogBean.mueble.peso}" />*<br/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                <h:outputLabel value="Descripcion" styleClass="label" /> <br/>
                                                <h:inputTextarea style="width:100%" value="#{CatalogBean.mueble.descripcion}" /> <br/>
                                            </td>
                                        </tr>
                                    </table>
                                    (*) Estos campos son obligatorios
                                </rich:tab>
                            </rich:tabPanel>
                            <a4j:jsFunction name="createMueble" action="#{CatalogBean.createOrUpdate}" reRender="stpEdicion,tblMuebles   "  />
                        </a4j:form>
                    </rich:simpleTogglePanel>
                    <a4j:form>
                        <rich:extendedDataTable id="tblMuebles" height="360px" value="#{CatalogBean.muebles}" var="cr">
                            <rich:column width="100" filterBy="#{cr.referencia}" sortBy="#{cr.referencia}" label="Referencia">
                                <f:facet name="header">
                                    Referencia
                                </f:facet>
                                #{cr.referencia}
                            </rich:column>
                            <rich:column width="100" filterBy="#{cr.nombre}" sortBy="#{cr.nombre}" label="Nombre">
                                <f:facet name="header">
                                    Nombre
                                </f:facet>
                                #{cr.nombre}
                            </rich:column>
                            <rich:column width="100" filterBy="#{cr.descripcion}" sortBy="#{cr.descripcion}" label="Descripcion">
                                <f:facet name="header">
                                    Descripcion
                                </f:facet>
                                #{cr.descripcion}
                            </rich:column>
                            <rich:column width="100" filterBy="#{cr.tipo}" sortBy="#{cr.tipo}" label="Tipo">
                                <f:facet name="header">
                                    Tipo
                                </f:facet>
                                #{cr.tipo}
                            </rich:column>
                            <rich:column width="100" filterBy="#{cr.material}" sortBy="#{cr.material}" label="Material">
                                <f:facet name="header">
                                    Material
                                </f:facet>
                                #{cr.material}
                            </rich:column>
                            <rich:column width="50" filterBy="#{cr.color}" sortBy="#{cr.color}" label="Color">
                                <f:facet name="header">
                                    Color
                                </f:facet>
                                #{cr.color}
                            </rich:column>
                            <rich:column width="50" filterBy="#{cr.peso}" sortBy="#{cr.peso}" label="Peso">
                                <f:facet name="header">
                                    Peso
                                </f:facet>
                                #{cr.peso}
                            </rich:column>
                            <rich:column width="114" label="op" >
                                <f:facet name="header" >
                                    Operaciones
                                </f:facet>
                                <h:graphicImage value="/img/edit.gif" onclick="srcById(#{cr.referencia})" styleClass="icon" />
                                <rich:spacer width="3" />
                                <h:graphicImage value="/img/del.gif" onclick="delMueble(#{cr.referencia})" styleClass="icon" />
                            </rich:column>
                        </rich:extendedDataTable>
                    </a4j:form>
                    <a4j:form>
                        <a4j:jsFunction name="newMueble" action="#{CatalogBean.newMueble}" reRender="stpEdicion"  />
                        <a4j:jsFunction name="delMueble" action="#{CatalogBean.delete}" reRender="tblMuebles" oncomplete="" >
                            <a4j:actionparam name="p1" assignTo="#{CatalogBean.id}" />
                        </a4j:jsFunction>
                        <a4j:jsFunction name="srcById" action="#{CatalogBean.findById}" reRender="stpEdicion" oncomplete="" >
                            <a4j:actionparam name="p1" assignTo="#{CatalogBean.id}" />
                        </a4j:jsFunction>
                    </a4j:form>
                </rich:panel>
            </ui:define>
        </ui:composition>
    </body>
</html>